<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            1、表单修饰符
                lazy: 在我们填完信息，光标离开标签的时候，才会将值赋予给 value ，也就是在 change 事件之后再进⾏信息同步
                    <input type="text" v-model.lazy="value">
                    <p>{{value}}</p>

                trim: ⾃动过滤⽤户输⼊的⾸空格字符，⽽中间的空格不会过滤

                number: 输⼊值转为数值类型，但如果这个值⽆法被 parseFloat 解析，则会返回原来的值

            2、事件修饰符

                stop：阻⽌了事件冒泡，相当于调⽤了 event.stopPropagation ⽅法
                    <div @click="shout(2)">
                        <button @click.stop="shout(1)">ok</button>
                    </div>//只输出1

                prevent: 阻⽌了事件的默认⾏为，相当于调⽤了 event.preventDefault ⽅法 ,prevent 修饰符，可以有效地防止表单提交时页面的刷新，这对于构建单页应用（SPA）尤其重要
                        处理文件上传：当需要实现无刷新页面的文件上传功能时，可以结合 .prevent 和 FormData 对象来实现
                    <form v-on:submit.prevent="onSubmit"></form>

                self: 只当在 event.target 是当前元素⾃身时触发处理函数
                    <div v-on:click.self="doThat">...</div>
                    使⽤修饰符时，顺序很重要；相应的代码会以同样的顺序产⽣。因此，⽤ v-on:click.prevent.self会阻⽌所有的点击，⽽ v-on:click.self.prevent 只会阻⽌对元素⾃身的点击

                once: 绑定了事件以后只能触发⼀次，第⼆次就不会触发
                    <button @click.once="shout(1)">ok</button>

                capture

                passive: 在移动端，当我们在监听元素滚动事件的时候，会⼀直触发 onscroll 事件会让我们的⽹⻚变卡，因此我们使⽤这个修饰符的时候，相当于给 onscroll 事件整了⼀个 .lazy 修饰符
                        不要把 .passive 和 .prevent ⼀起使⽤,因为 .prevent 将会被忽略，同时浏览器可能会向你展示⼀个警告。
                        <div v-on:scroll.passive="onScroll">...</div>


                native: 让组件变成像 html 内置标签那样监听根元素的原⽣事件，否则组件上使⽤ v-on 只会监听⾃定义事件
                <my-component v-on:click.native="doSomething"></my-component>

                当你使用 Element UI、Vuetify 等 UI 库时，它们的组件（如 <el-input>、<v-btn>）封装了原生元素。如果你想直接监听这些组件根元素的原生事件，可以使用 .native
                <el-input  v-model="inputValue" @keyup.native="onKeyup" />
                组件封装不完整或不暴露所需事件
                    第三方组件库（如 Element UI, Vuetify, Ant Design Vue 等）或你团队内部封装的组件，不一定能预见到所有使用者的需求。

                场景：你想在用户按下回车键（Enter） 时提交表单。
                问题：<el-input> 组件可能提供了 @input（内容变化时）、@change（值改变且失去焦点时）等事件，但它可能没有专门提供一个 @enter 或 @keyup.enter 的自定义事件。
                解决方案：直接监听其内部 <input> 元素的原生 @keyup 事件（通过 .native），然后在处理函数中判断 event.key === 'Enter'。这样你就不依赖组件开发者是否提供了这个特定的自定义事件

                .keyCode
                    <input type="text" @keyup.keyCode="shout()">
                
                left,middle,right
                    <button @click.left="shout(1)">ok</button>
                    <button @click.right="shout(1)">ok</button>
                    <button @click.middle="shout(1)">ok</button>
        */ 
    </script>
</body>
</html>